<template>
  <div class="explain-info">
    <div class="explain-title">
      <span :class="{'title-active':showFlag}" @click="selectHandle(1)">代理说明</span>
      <span :class="{'title-active':!showFlag}" @click="selectHandle(0)">代理记录</span>
    </div>
    <div v-if="showFlag">
      <div class="explain-content" v-if=" ($route.path).indexOf('agencydetail') >= 0">
        <div class="block">
          <h3 class="title">代理需知：</h3>
          <div class="content">
            <p>
              <span class="point"></span>
              <span class="text">代理订单提交确认后,代理商须在5分钟内支付订单对应的代理订金，超时将自动取消。</span>
            </p>
            <p>
              <span class="point"></span>
              <span class="text">订单支付成功，该商品会自动添加到代理商本人的云木屋商品列表中，代理生效。</span>
            </p>
            <p>
              <span class="point"></span>
              <span class="text">
                木头云平台使用第三方支付平台通联云商通作为托管账户担保交易，所有交易款项均由通联云商通托管，代理商下单前需充值到个人账户，以保证订单顺利支付。产生的代理费将由优选商家通过通联云
                商通进行支付，木头云平台全程不接触用户资金，保障用户交易安全。
              </span>
            </p>
            <p>
              <span class="point"></span>
              <span class="text">该订金商品已置放于木头云平台合作的第三方仓储公司进行监管，并由第三方仓储公司购买足额保险。</span>
            </p>
            <p>
              <span class="point"></span>
              <span class="text">订单进行过程中,如遇到任何问题,请及时联系木头云平台客服处理，客服热线:400-156-8818。</span>
            </p>
          </div>
        </div>
        <div class="block">
          <h3 class="title">云木屋：</h3>
          <div class="content">
            <p>
              指的是木头云平台普通买家加入木头云平台开办云木屋，即可通过云木屋代理优选商家发布的【有订金】产品或【无订金】产品（木材/家具），从中获得一定的代理费。其中代理【无订金】产品，只有
              销售成功，代理商才能获得一定的代理费。代理商成功提交代理订单后，系统将自动发布该产品的信息至个人云木屋商品列表。
            </p>
          </div>
        </div>
        <div class="block">
          <h3 class="title">
            代理模式：
            <div class="content">
              <img class="pic" src="@/assets/hall/explain.png" alt />
            </div>
          </h3>
        </div>
      </div>
      <div class="explain-content" v-if="($route.path).indexOf('agencynodetail') >= 0">
        <div class="block">
          <h3 class="title">代理需知：</h3>
          <div class="content">
            <p>
              <span class="point"></span>
              <span class="text">代理商点击“马上代理”，成功提交订单后，该商品会自动添加到代理商本人的云木屋商品列表中，代理生效。</span>
            </p>
            <p>
              <span class="point"></span>
              <span
                class="text"
              >木头云平台使用第三方支付平台通联云商通作为托管账户担保交易，所有交易款项均由通联云商通托管，产生的代理费将由优选商家通过通联云商通进行支付，木头云平台全程不接触用户资金，保障交易安全。</span>
            </p>
            <p>
              <span class="point"></span>
              <span class="text">订单进行过程中,如遇到任何问题,请及时联系木头云平台客服处理，客服热线: 400-156-8818。</span>
            </p>
          </div>
        </div>
        <div class="block">
          <h3 class="title">云木屋：</h3>
          <div class="content">
            <p>
              指的是木头云平台普通买家加入木头云平台开办云木屋，即可通过云木屋代理优选商家发布的【有订金】产品或【无订金】产品（木材/家具），从中获得一定的代理费。其中代理【无订金】产品，只有
              销售成功，代理商才能获得一定的代理费。代理商成功提交代理订单后，系统将自动发布该产品的信息至个人云木屋商品列表。
            </p>
          </div>
        </div>
        <div class="block">
          <h3 class="title">
            代理模式：
            <div class="content">
              <img class="pic" src="@/assets/hall/explain1.png" alt />
            </div>
          </h3>
        </div>
      </div>
    </div>
    <div v-else class="record-wrap">
      <el-table
        v-if=" ($route.path).indexOf('agencydetail') >= 0"
        class="record-list"
        :data="recordList"
        border
        :header-cell-style="rowClass"
        :cell-style="cellStyle"
      >
        <el-table-column label="序号" width="120">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="代理商">
          <template slot-scope="scope">{{scope.row.agent_phone}}</template>
        </el-table-column>
        <el-table-column label="代理份数">
          <template slot-scope="scope">{{scope.row.agent_copies}}</template>
        </el-table-column>
        <el-table-column label="代理订金（元）">
          <template slot-scope="scope">{{scope.row.agent_deposit}}</template>
        </el-table-column>
        <el-table-column label="代理时间">
          <template slot-scope="scope">{{scope.row.agent_time | parseTime}}</template>
        </el-table-column>
      </el-table>

      <el-table
        v-if="($route.path).indexOf('agencynodetail') >= 0"
        class="record-list"
        :data="recordList"
        border
        :header-cell-style="rowClass"
        :cell-style="cellStyle"
      >
        <el-table-column label="序号" width="120">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="代理商">
          <template slot-scope="scope">{{scope.row.agent_phone}}</template>
        </el-table-column>
        <el-table-column label="代理时间">
          <template slot-scope="scope">{{scope.row.agent_time | parseTime}}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getAgentRecord } from "@/api/agency";
export default {
  props: {
    detail: {
      type: String
    },
    goodsId: {
      type: String
    }
  },
  data() {
    return {
      nodetail: '<span class="nodetail">暂无代理说明</span>',
      showFlag: 1,
      resParams: {
        product_id: ""
      },
      recordList: []
    };
  },
  watch: {
    detail(oldVal, newVal) {},
    goodsId: function(newVal, oldVal) {
      this.resParams.product_id = newVal;
      newVal && this._getAgentRecord();
    }
  },
  methods: {
    _getAgentRecord() {
      getAgentRecord(this.resParams).then(res => {
        if (res.code == 1 && res.data.list) {
          this.recordList = res.data.list;
          console.log("代理记录", this.recordList);
          let reg = /^(\d{3})\d+(\d{4})$/;
          for (let i = 0; i < this.recordList.length; i++) {
            this.recordList[i].agent_phone = this.recordList[
              i
            ].agent_phone.replace(reg, "$1****$2");
          }
        }
      });
    },
    selectHandle(flag) {
      this.showFlag = flag;
    },
    rowClass() {
      return "background:rgba(240,249,252,1);font-size:14px;color:#999;font-weight:400;text-align:center;height:40px;padding: 0;";
    },
    cellStyle() {
      return "height:60px;font-size:14px;color:#333;text-align:center;";
    }
  }
};
</script>
<style lang="scss" scoped>
.explain-info {
  background: #fff;
  border-radius: 8px;
  position: relative;
  min-height: 500px;
  .explain-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    padding: 0 30px;
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #ebf0f2;
    span {
      position: relative;
      cursor: pointer;
      // padding-bottom: 10px;
      display: inline-block;
      height: 100%;
      &:first-of-type {
        margin-right: 30px;
      }
      &.title-active {
        &::after {
          content: "";
          width: 100%;
          height: 2px;
          position: absolute;
          background: #ff7f5b;
          left: 0;
          bottom: 0;
        }
      }
    }
  }
  .record-wrap {
    margin: 20px;
  }
  .explain-content {
    min-height: 300px;
    padding: 30px;
    .block {
      margin-bottom: 30px;
      .title {
        font-size: 14px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 15px;
      }
      .content {
        color: #666;
        font-size: 14px;
        p {
          display: flex;
          font-weight: 400;
          line-height: 26px;
          margin: 0;
          .point {
            flex: 0 0 5px;
            height: 5px;
            border-radius: 50%;
            background: #ff7f5b;
            margin-top: 10px;
          }
          .text {
            flex: 1;
            margin-left: 8px;
          }
        }
        .pic {
          display: block;
          margin: 40px auto;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.explain-info {
  .nodetail {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #999;
    font-size: 14px;
  }
}
</style>

